<template>
    <view class="page-box column rowCenter verCenter">
        <view class="btn row rowCenter verCenter" @click="chooseImageChange">上传图片添加水印</view>
        <view class="watermark-pic" v-if="picSrc">
            <image mode="widthFix" :src="picSrc" @click="previewChange(picSrc)"></image>
        </view>
        <!-- 隐藏的canvas用于绘制水印 -->
        <canvas canvas-id="watermarkCanvas" class="watermark-canvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    export default {
        data() {
            return {
                picSrc: '',
                location: '宝能科技园', // 固定地点
                watermarkInfo: {
                    width: 0,
                    height: 0
                },
                watermarkedFile: null, // 保存水印后的图片
                canvasWidth: 300, // 默认canvas宽度
                canvasHeight: 150 // 默认canvas高度
            };
        },
        onLoad(options) {

        },
        methods: {
            /**
             * 上传图片
             * @param {Object} elem
             */
            chooseImageChange() {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: chooseImageRes => {
                        // 显示loading
                        uni.showLoading({
                            title: '处理中...'
                        });

                        // 获取选择的图片路径数组
                        const imagePath = chooseImageRes.tempFilePaths[0]; // 获取选中的图片路径
                        
                        // 获取图片信息
                        uni.getImageInfo({
                            src: imagePath,
                            success: imageInfo => {
                                console.log('图片信息:', imageInfo);
                                // 保存图片宽高信息并设置canvas尺寸
                                this.watermarkInfo.width = imageInfo.width;
                                this.watermarkInfo.height = imageInfo.height;
                                
                                // 设置canvas尺寸与原图一致
                                this.canvasWidth = imageInfo.width;
                                this.canvasHeight = imageInfo.height;
                                
                                // 延迟一下再绘制，确保canvas大小已更新
                                setTimeout(() => {
                                    // 先添加水印
                                    this.drawWatermark(imagePath, imageInfo.width, imageInfo.height);
                                }, 100);
                            },
                            fail: (err) => {
                                console.error('获取图片信息失败:', err);
                                uni.hideLoading();
                                uni.showToast({
                                    title: '获取图片信息失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                });
            },
            /**
             * 在画布上绘制水印
             * @param {String} imagePath 图片路径
             * @param {Number} width 图片宽度
             * @param {Number} height 图片高度
             */
            drawWatermark(imagePath, width, height) {
                try {
                    // 获取当前时间
                    const date = new Date();
                    const year = date.getFullYear();
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const day = date.getDate().toString().padStart(2, '0');
                    const hours = date.getHours().toString().padStart(2, '0');
                    const minutes = date.getMinutes().toString().padStart(2, '0');
                    
                    // 获取星期
                    const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
                    const weekDay = weekDays[date.getDay()];
                    
                    // 格式化时间和地点水印文本
                    const timeText = `${hours}:${minutes}`; 
                    const dateText = `${year}.${month}.${day}星期${weekDay}`;
                    const locationText = this.location;
                    
                    // 创建画布上下文
                    const context = uni.createCanvasContext('watermarkCanvas', this);
                    
                    // 显式设置画布大小
                    context.canvas = {
                        width: width,
                        height: height
                    };
                    
                    // 确保画布清空
                    context.clearRect(0, 0, width, height);
                    
                    // 绘制原始图片
                    context.drawImage(imagePath, 0, 0, width, height);
                    
                    // 计算水印尺寸和位置（基于图片宽度的比例）
                    const watermarkWidth = Math.min(Math.floor(width * 0.45), 240); // 水印宽度
                    const padding = Math.max(Math.floor(width * 0.015), 8); // 内部填充间距
                    const fontSizeLarge = Math.max(Math.floor(width * 0.045), 16); // 大字体
                    const fontSizeMedium = Math.max(Math.floor(width * 0.03), 12); // 中字体
                    
                    // 行高计算
                    const lineHeightLarge = Math.max(fontSizeLarge * 1.4, 22);
                    const lineHeightMedium = Math.max(fontSizeMedium * 1.4, 18);
                    
                    // 水印总高度 (时间 + 日期 + 地点) - 移除版权信息的高度
                    const watermarkHeight = lineHeightLarge + lineHeightMedium * 2;
                    
                    // 水印定位 (左下角)
                    const boxX = 10;
                    const boxY = height - watermarkHeight - 10;
                    
                    // 设置当前垂直位置指针，控制文本垂直排列
                    let currentY = boxY;
                    
                    // 移除不支持的setFontWeight方法
                    // 使用描边和多次绘制实现加粗效果
                    
                    // 绘制时间 - 以大字体显示，使用白色字体
                    context.setFillStyle('#FFFFFF');
                    context.setFontSize(fontSizeLarge);
                    context.setTextAlign('left');
                    currentY += lineHeightLarge * 0.75;
                    
                    // 使用多次绘制模拟粗体效果
                    const timeX = boxX + padding;
                    // 绘制轮廓
                    context.fillText(timeText, timeX - 0.5, currentY - 0.5);
                    context.fillText(timeText, timeX + 0.5, currentY - 0.5);
                    context.fillText(timeText, timeX - 0.5, currentY + 0.5);
                    context.fillText(timeText, timeX + 0.5, currentY + 0.5);
                    // 中心填充
                    context.fillText(timeText, timeX, currentY);
                    
                    // 绘制日期
                    context.setFontSize(fontSizeMedium);
                    currentY += lineHeightMedium;
                    const dateX = boxX + padding;
                    // 绘制轮廓
                    context.fillText(dateText, dateX - 0.5, currentY - 0.5);
                    context.fillText(dateText, dateX + 0.5, currentY - 0.5);
                    context.fillText(dateText, dateX - 0.5, currentY + 0.5);
                    context.fillText(dateText, dateX + 0.5, currentY + 0.5);
                    // 中心填充
                    context.fillText(dateText, dateX, currentY);
                    
                    // 绘制地点
                    currentY += lineHeightMedium;
                    const locationX = boxX + padding;
                    // 绘制轮廓
                    context.fillText(locationText, locationX - 0.5, currentY - 0.5);
                    context.fillText(locationText, locationX + 0.5, currentY - 0.5);
                    context.fillText(locationText, locationX - 0.5, currentY + 0.5);
                    context.fillText(locationText, locationX + 0.5, currentY + 0.5);
                    // 中心填充
                    context.fillText(locationText, locationX, currentY);
                    
                    // 绘制到画布上
                    context.draw(false, () => {
                        // 延迟一下确保绘制完成
                        setTimeout(() => {
                            // 将画布内容保存为图片
                            uni.canvasToTempFilePath({
                                canvasId: 'watermarkCanvas',
                                x: 0,
                                y: 0,
                                width: width,
                                height: height,
                                destWidth: width, // 确保输出图片宽度与原图一致
                                destHeight: height, // 确保输出图片高度与原图一致
                                fileType: 'jpg',
                                quality: 0.9,
                                success: res => {
                                    console.log('生成临时文件成功:', res.tempFilePath);
                                    // 更新图片源用于显示
                                    this.picSrc = res.tempFilePath;
                                    this.watermarkedFile = res.tempFilePath;
                                    this.$forceUpdate();
                                    
                                    // 上传带水印的图片
                                    this.uploadWatermarkedImage();
                                },
                                fail: err => {
                                    console.error('保存画布失败:', err);
                                    uni.hideLoading();
                                    uni.showToast({
                                        title: '生成水印图片失败',
                                        icon: 'none'
                                    });
                                }
                            }, this);
                        }, 300);
                    });
                } catch (error) {
                    console.error('绘制水印发生错误:', error);
                    uni.hideLoading();
                    uni.showToast({
                        title: '生成水印图片出错',
                        icon: 'none'
                    });
                }
            },
            /**
             * 上传带水印的图片到服务器
             */
            uploadWatermarkedImage() {
                // 显示上传中
                uni.showLoading({
                    title: '上传中...'
                });
                
                // 上传带水印的图片到服务器
                uni.uploadFile({
                    url: API.uploadImage,
                    filePath: this.watermarkedFile,
                    name: 'file',
                    formData: {
                        'source': 'appUser'
                    },
                    success: uploadFileRes => {
                        console.log('服务器上传图片成功：', uploadFileRes);
                        uni.hideLoading();
                        let data = JSON.parse(uploadFileRes.data);
                        if (data.code === 0) {
                            // 上传成功
                            uni.showToast({
                                title: '上传成功',
                                icon: 'success'
                            });
                        } else {
                            uni.showToast({
                                title: data.msg,
                                icon: 'none'
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('上传图片失败:', err);
                        uni.hideLoading();
                        uni.showToast({
                            title: '上传图片失败',
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 预览图片
             * @param {Object} img
             */
            previewChange(img) {
                uni.previewImage({
                    urls: [img]
                });
            },
        }
    };
</script>

<style scoped lang="scss">
    .btn {
        margin: 400rpx auto 0;
        width: 309rpx;
        height: 68rpx;
        background: #1226aa;
        border-radius: 34rpx;
        font-size: 26rpx;
        color: #ffffff;
    }

    .watermark-pic {
        margin-top: 100rpx;
        width: 90%;
        
        image {
            width: 100%;
            border-radius: 10rpx;
            box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
        }
    }
    
    .watermark-canvas {
        position: fixed;
        left: -9999px;
        top: -9999px;
        z-index: -1;
    }
</style>